<template>

  <div id="app">

    <el-container>

      <el-header>

        <h1>臻色调销售营业分析</h1>

      </el-header>

      <el-main>

        <div class="fourData">

          <el-row :gutter="20">

            <el-col :span="8" v-for="(item,index) in salesList" :key="index">
              <div class="grid-content bg-purple" >
                <div class="aloneTurnover">{{item.description}}</div>
                <div class="aloneTurnover-data">营业额：{{item.salesVal}}&nbsp;元</div>
                <div class="aloneTurnover-data">净利润：{{item.sumProfitVal}}&nbsp;元</div>

              </div>
            </el-col>

          </el-row>

        </div>

      </el-main>

    </el-container>

  </div>

</template>



<script>

import { listSales } from "@/api/system/sellturnover";

export default {

  name: "sellturnover",

  data() {

    return {

      // 遮罩层

      loading: true,

      chart1: null,

      chart2: null,

      salesList: [],


    };

  },

  created() {
    this.getSalesList();

  },



  methods: {

    getSalesList() {
      this.loading = true;
      listSales().then(response => {
        this.salesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

  },

  mounted() {

  },

};

</script>

<style scoped>
.el-header {
  border: 1px solid #fff;
  background-color: #e9508e;
}

h1 {
  margin: 0px;
  text-align: center;
  font-size: 50px;
  color: #fff;
}


.el-row {
  margin-bottom: 40px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  padding-top: 10px;padding-bottom: 10px;
}

.grid-content {
  border-radius: 10px;
  min-height: 80px;
  background: #409eff;
  /* border: 10px solid red; */
}

.aloneTurnover {
  font-size: 20px;
  color: #fffffb;
  padding: 0px 34px;
  margin-bottom: 20px;
  text-align: center;
}

.aloneTurnover-data {
  font-size: 20px;

  color: #fffffb;

  /* border: 1px solid black; */

  padding: 0px 34px;

  margin-bottom: 0;

  text-align: center;
}

.row-bg {
  padding: 10px 0;

  background-color: #f9fafc;
}
</style>